<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>财务报表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main" style="min-height: 50px">

<%--    <div class="layui-row layui-col-space15">--%>
<%--        <div class="layui-col-xs12 layui-col-md3">--%>

<%--            <div class="layui-card top-panel">--%>
<%--                <div class="layui-card-header">要展示的指标名称</div>--%>
<%--                <div class="layui-card-body">--%>
<%--                    <div class="layui-row layui-col-space5">--%>
<%--                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">--%>
<%--                            9,054,056--%>
<%--                        </div>--%>
<%--                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">--%>
<%--                            比昨天 <a style="color: #1aa094">▲0.12</a><br>--%>
<%--                            比七日 <a style="color: #bd3004">▼0.06</a>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>

<%--        </div>--%>
<%--        <div class="layui-col-xs12 layui-col-md3">--%>

<%--            <div class="layui-card top-panel">--%>
<%--                <div class="layui-card-header">要展示的指标名称</div>--%>
<%--                <div class="layui-card-body">--%>
<%--                    <div class="layui-row layui-col-space5">--%>
<%--                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">--%>
<%--                            9,054,056--%>
<%--                        </div>--%>
<%--                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">--%>
<%--                            比昨天 <a style="color: #1aa094">▲0.12</a><br>--%>
<%--                            比七日 <a style="color: #bd3004">▼0.06</a>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>

<%--        </div>--%>
<%--        <div class="layui-col-xs12 layui-col-md3">--%>

<%--            <div class="layui-card top-panel">--%>
<%--                <div class="layui-card-header">要展示的指标名称</div>--%>
<%--                <div class="layui-card-body">--%>
<%--                    <div class="layui-row layui-col-space5">--%>
<%--                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">--%>
<%--                            9,054,056--%>
<%--                        </div>--%>
<%--                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">--%>
<%--                            比昨天 <a style="color: #1aa094">▲0.12</a><br>--%>
<%--                            比七日 <a style="color: #bd3004">▼0.06</a>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>

<%--        </div>--%>
<%--        <div class="layui-col-xs12 layui-col-md3">--%>

<%--            <div class="layui-card top-panel">--%>
<%--                <div class="layui-card-header">要展示的指标名称</div>--%>
<%--                <div class="layui-card-body">--%>
<%--                    <div class="layui-row layui-col-space5">--%>
<%--                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">--%>
<%--                            9,054,056--%>
<%--                        </div>--%>
<%--                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">--%>
<%--                            比昨天 <a style="color: #1aa094">▲0.12</a><br>--%>
<%--                            比七日 <a style="color: #bd3004">▼0.06</a>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>

<%--        </div>--%>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="echarts-records" style="background-color:#ffffff;min-height:750px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:750px;padding: 10px"></div>
        </div>
    </div>


<%--    <div class="layui-row layui-col-space15">--%>
<%--        <div class="layui-col-xs12 layui-col-md6">--%>
<%--            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>--%>
<%--        </div>--%>
<%--        <div class="layui-col-xs12 layui-col-md6">--%>
<%--            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>--%>
<%--        </div>--%>
<%--    </div>--%>


</div>
<!--</div>-->
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;

        function getWeek(unixTime, timeZone) {
            if (typeof (timeZone) == 'number')
            {
                unixTime = parseInt(unixTime) + parseInt(timeZone) * 60 * 60;
            }
            var now = new Date(unixTime);
            var   year=now.getFullYear();
            var   month=now.getMonth()+1;
            var   date=now.getDate();
            var dd=new Date(year+"-"+month+"-"+date);
            var week;
            if(dd.getDay() == 0) week = "周日"
            if(dd.getDay() == 1) week = "周一"
            if(dd.getDay() == 2) week = "周二"
            if(dd.getDay() == 3) week = "周三"
            if(dd.getDay() == 4) week = "周四"
            if(dd.getDay() == 5) week = "周五"
            if(dd.getDay() == 6) week = "周六"
            return week;
        }
        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        var optionRecords = {
            title: {
                text: '利润',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [],
                type: 'line',
                areaStyle: {}
            }]
        };
        echartsRecords.setOption(optionRecords);
        // 异步加载数据
        $.get('/log/Records').done(function (data) {
            // 填入数据
            echartsRecords.setOption({
                xAxis: {
                    data: [getWeek(data[0].date),getWeek(data[1].date), getWeek(data[2].date), getWeek(data[3].date), getWeek(data[4].date), getWeek(data[5].date), getWeek(data[6].date)]
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '利润',
                    data: [data[0].sum, data[1].sum, data[2].sum, data[3].sum, data[4].sum, data[5].sum, data[6].sum]
                }]
            });
        });

        /**
         * 玫瑰图表
         */
        var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
        var optionPies = {
            title: {
                text: '利润',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['食品类', '日用品类', '百货类', '饮料类']
            },
            series: [
                {
                    name: '售买类别',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    roseType: 'radius',
                    data: [
                        {value: 335, name: '食品类'},
                        {value: 310, name: '日用品类'},
                        {value: 234, name: '百货类'},
                        {value: 135, name: '饮料类'},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        echartsPies.setOption(optionPies);

        $.get('/log/Pies').done(function (data) {
            // 填入数据
            echartsPies.setOption({
                series: [{
                    // 根据名字对应到相应的系列
                    data: [
                        {value: (data[0].sum).toFixed(2), name: data[0].tname},
                        {value: (data[1].sum).toFixed(2), name: data[1].tname},
                        {value: (data[2].sum).toFixed(2), name: data[2].tname},
                        {value: (data[3].sum).toFixed(2), name: data[3].tname},
                    ]
                }]
            });
        });

        /**
         * 柱状图
         */
        var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');
        var optionDataset = {
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                    {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                    {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                    {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

        echartsDataset.setOption(optionDataset);


        /**
         * 中国地图
         */
        var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');


        var optionMap = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2012',
                        tooltip: '2012'
                    }
                }
            ]
        };

        echartsMap.setOption(optionMap);


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
